<template>
  <div>
    <van-swipe :show-indicators="dy_falg" class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in list" :key="index">
        <img :src="item.banner_img" alt="">
      </van-swipe-item>
    </van-swipe>

    <ul class="dy-list">
      <li @click="te">
        <img src="../../public/image/img4_03.png" alt="">
        <p>特色课</p>
      </li>
      <li @click="dao">
        <img src="../../public/image/img4_05.png" alt="">
        <p>一对一辅导</p>
      </li>
      <li @click="candler">
        <img src="../../public/image/img4_07.png" alt="">
        <p>学习日历</p>
      </li>
    </ul>

    <Teacher :dy_list="item" v-for="(item,index) in dy_list" :key="index"></Teacher>
  </div>
</template>

<script>
import {banner,List} from '@/request/http'
import Teacher from '@/components/Index/Teacher'
export default {
  name: "",
  data() {
    return {
      list:[],
      dy_falg:false,
      dy_list:[]
    };
  },
  props: [],
  components: {
    Teacher,
  },
  mounted() {
    this.banner(),
    List().then(res=>{
      console.log(res)
      this.dy_list=res
    })
  },
  methods: {
    banner(){
      banner().then(res=>{
      console.log(res)
      this.list=res

    })
    },
    te(){
      this.$router.push("/course")
    },
    dao(){
      this.$router.push("/oto")
    },
    candler(){
      this.$router.push("/candler")
    }
  }
};
</script>

<style scoped>
.my-swipe{
  width: 100%;
  height: 220px;
}
.my-swipe img{
  width: 100%;
  height: 220px;
  justify-content: space-around;
  align-items: center
}
.dy-list{
  display: flex;
  position: absolute;
  width: 100%;
  height: 100px;
  /* background: rgb(197, 41, 41); */
  justify-content: space-around;
  top: 190px;
}
.dy-list>li{
  width: 26%;
  background: #fff;
  border-radius: 5px;
  text-align: center;
}
.dy-list>li>img{
  margin-top: 25px;
}
.dy-list>li>p{
  margin-top: 5px;
}
</style>